<template>
	<view class="content">
		<view class="info-con">
			<view class="user-lista">
				<u-avatar :src="src" size="55"></u-avatar>
				<view class="list-texta">
					<view style="font-weight: 500;color: #fff;font-size: 31rpx;">
						<u--text color="#fff" mode="name" :text="selectUser.patientName" format="encrypt"></u--text>
					</view>
					<view v-if="selectUser.patientCard">
						就诊卡号：{{selectUser.patientCard.substr(0, 1) + '****************'+selectUser.patientCard.substr(-1, 1)}}
					</view>
					<view>证件类型：身份证</view>
				</view>
				<view class="user-buta" @click="show=true">更换就诊人</view>
			</view>

			<view class="flex-row">
				<view>就诊卡类型：</view>
				<view class="info-text">身份证</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>联系电话：</view>
				<view class="info-text" v-if="selectUser.patientTel">
					{{selectUser.patientTel.substr(0, 3) + '*******'+selectUser.patientTel.substr(-1, 1)}}
				</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>充值类型</view>
				<view class="info-text">门诊充值</view>
			</view>
		</view>
		<view class="recharge-con">
			<view style="font-weight: 500;font-size: 31rpx;">充值金额</view>
			<view class="con-list">
				<view class="con-item" v-for="(item,index) in list" :key="index" @click="senletTab(item,index)">
					￥{{item}}
				</view>
			</view>
			<view class="recharge-input">
				<view>￥</view>
				<view style="flex: 1;margin-left: 10rpx;">
					<u-input placeholder="请输入充值金额" v-model="money" type="number" border="none" clearable></u-input>
				</view>
			</view>

		</view>
		<view class="recharge-dec">
			温馨提醒：扣费成功后请查看订单确定充值成功发起支付请在两分钟内完成支付，否则订单关闭若充值失败请到人工窗口处申请退费。
		</view>
		<view class="book-but">
			<u-button type="primary" text="立即充值" @click="goPay"></u-button>
		</view>
		<u-popup :show="show" mode="bottom" :round="10" @close="show = false">
			<view class="pop-con">
				<view class="pop-title">选择就诊人</view>
				<scroll-view scroll-y="true" class="scroll-y">
					<view class="user-list" v-for="(item,index) in userList" :key="index">
						<u-avatar :src="src" size="55"></u-avatar>
						<view class="list-text">
							<view style="font-weight: 500;color: #000000;font-size: 31rpx;">
								<u--text mode="name" :text="item.patientName" format="encrypt"></u--text>
							</view>
							<view>
								就诊卡号：{{item.patientCard.substr(0, 1) + '****************'+item.patientCard.substr(-1, 1)}}
							</view>
							<view>证件类型：身份证</view>
						</view>
						<view style="margin-left: auto;width: 128rpx;">
							<u-button type="primary" :plain="true" shape="circle" text="确定"
								@click="changeUser(item)"></u-button>

						</view>
					</view>
				</scroll-view>
				<view class="book-but">
					<u-button type="primary" text="添加就诊人"
						@click="goPage('/pages/bookbuilding/bookbuilding')"></u-button>

				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		userlistApi,
		createApi
	} from "@/api/user"
	// import {
	// 	wxpayOrder
	// } from "@/utils/wx"
	export default {
		data() {
			return {
				src: '',
				list: [10, 20, 30, 50, 100],
				money: '',
				show: false,
				selectUser: '',
				userList: [],

			}
		},
		onLoad() {
			this.getUser()
		},
		methods: {
			async getUser() {
				let userInfo = uni.getStorageSync('userInfo')
				const res = await userlistApi({
					userId: userInfo.id,
					pageNum: 1,
					pageSize: 100,
					patientType: 1
				})
				this.userList = res.rows
				if (uni.getStorageSync('selectUser')) {
					this.selectUser = uni.getStorageSync('selectUser')


				} else {
					this.selectUser = this.userList[0]
					uni.setStorageSync('selectUser', this.userList[0])
				}

			},
			senletTab(item, index) {
				this.money = item
				this.wxPay()
			},
			changeUser(item) {
				this.selectUser = item
				uni.setStorageSync('selectUser', item)
				this.show = false
			},
			goPage(url) {
				this.show = false
				uni.navigateTo({
					url
				})
			},
			goPay() {
				this.wxPay()
			},
			async wxPay() {
				if (!this.money) {
					uni.$u.toast('请输入充值金额')
					return
				}
				uni.showLoading({
					title: '充值中...',
					mask: true
				})
				const res = await createApi({
					id: this.selectUser.id,
					type: 1,
					money: this.money,
				})
				console.log(JSON.parse(res.msg));
				uni.hideLoading()
				this.wxpayOrder(JSON.parse(res.msg))

			},
			wxpayOrder(data) {
				if (typeof WeixinJSBridge === 'undefined') {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(data), false)
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(data))
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(data))
					}
				} else {
					this.onBridgeReady(data)
				}
			},

			onBridgeReady(etr) {
				let that = this
				WeixinJSBridge.invoke( //这个对象只有微信浏览器支持
					'getBrandWCPayRequest', etr,
					function(res) {
						if (res.err_msg == 'get_brand_wcpay_request:ok') {
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})
							setTimeout(() => { //支付成功后的展示页面
								uni.navigateBack()
							}, 1500)
						} else {

							uni.$u.toast('支付失败')
						}
					})

			}

		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		min-height: 100%;
		box-sizing: border-box;
		background: #F8F8F8;
		color: #666666;
		font-size: 27rpx;
	}

	.info-con {
		width: 750rpx;
		padding: 0 31rpx;
		padding-top: 23rpx;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.flex-row {
		display: flex;
		align-items: center;
		padding: 21rpx 0;
	}

	.info-text {
		margin-left: auto;
		color: #000000;
	}

	.user-lista {
		width: 688rpx;
		height: 185rpx;
		background: linear-gradient(135deg, #05A2FF 0%, #0CCFFF 100%);
		border-radius: 19rpx;
		padding: 31rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		color: #FFFFFF;
		font-size: 23rpx;
	}

	.list-texta {
		height: 100%;
		margin-left: 23rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.user-buta {
		margin-left: auto;
		width: 146rpx;
		height: 62rpx;
		background: #FFFFFF;
		border-radius: 31rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #05A2FF;
	}

	.recharge-con {
		margin: 0 auto;
		margin-top: 46rpx;
		width: 688rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		padding: 31rpx;
		box-sizing: border-box;
		color: #000000;
		font-size: 20rpx;
	}

	.con-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-right: -31rpx;
	}

	.con-item {
		width: 188rpx;
		height: 77rpx;
		border-radius: 10rpx;
		border: 1px solid #CCCCCC;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 31rpx;
		margin-top: 23rpx;
		box-sizing: border-box;
	}

	.itemactive {
		background: #EDF8FF !important;
		border: 1px solid #05A2FF !important;
	}

	.recharge-input {
		width: 627rpx;
		height: 77rpx;
		background: #F4F4F4;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding: 0 23rpx;
		box-sizing: border-box;
		margin-top: 23rpx;
		font-size: 27rpx;
	}

	.recharge-dec {
		margin: 0 auto;
		margin-top: 23rpx;
		width: 688rpx;
		color: #999999;
		font-size: 23rpx;
		line-height: 40rpx;
	}

	.book-but {
		width: 688rpx;
		height: 85rpx;
		margin: 0 auto;
		margin-top: 92rpx;
	}

	.pop-con {
		padding: 31rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pop-title {
		width: 100%;
		text-align: center;
		font-weight: 500;
		color: #000000;
		font-size: 31rpx;
	}

	.scroll-y {
		height: 400rpx;
		width: 688rpx;
		margin-top: 31rpx;
		box-sizing: border-box;
	}

	.user-list {
		width: 688rpx;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		padding-left: 19rpx;
		padding-right: 29rpx;
		padding-top: 23rpx;
		padding-bottom: 44rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin-bottom: 23rpx;
		box-shadow: 0px 0 13rpx 0px rgba(5, 162, 255, 0.11);
		color: #999999;
		font-size: 23rpx;
	}

	.list-text {
		height: 100%;
		margin-left: 23rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.book-buta {
		width: 688rpx;
		height: 85rpx;
		margin: 0 auto;
		margin-top: 31rpx;
	}
</style>